<template>
    <div class="wallet">

        <!-- 贴顶导航 -->
        <UserFixedHead title="POD wallet" />

        <!-- 初始化加载中 -->
        <UxIniting v-if="!inited" />

        <!-- 未开通、审核中、拒绝 -->
        <template v-else-if="is_wallet != 2">
            <h2>POD wallet</h2>
            <BillingWalletUnActivate :config="config" @reload="getConfig()" />
            <UxLoading2 :loading="loading.config" />
        </template>


        <!-- 正常可使用 -->
        <template v-else>

            <h2>POD wallet</h2>
            <h3>Current balance</h3>

            <div class="wallet-box">

                <div class="wallet-balance">
                    <img src="@/assets/images/billing/wallet-logo.png" />
                    <div class="wallet-balance-card">
                        <em>USD</em>
                        <strong v-text="formatPrice(balance)"></strong>

                        <BillingWalletRecharge :config="config" @reload="getRecharge(1)"
                                               @update-user="setRechargeUser($event)" />
                    </div>


                    <!-- <button @click="openRechargeDialog()">Add funds</button> -->

                </div>

                <div class="wallet-stores">

                    <template v-if="stores.length == 0">
                        <h3>How do automatic payments work?</h3>
                        <p>When you turn on automatic payments for one of your integrated stores, your POD wallet will
                            start to pay for orders imported from that store automatically. Please ensure there is
                            sufficient balance in your POD wallet to prevent payment failures.</p>
                    </template>
                    <h3 v-else>Stores with automatic payment enabled</h3>

                    <ul>
                        <li type="add" @click="openAutoPay()">
                            <svg viewBox="0 0 14 14">
                                <rect x="6" y="0" width="2" height="14" rx="1"></rect>
                                <rect x="0" y="6" width="14" height="2" rx="1"></rect>
                            </svg>
                            <strong></strong>
                            <span>Turn on automatic payments</span>
                        </li>
                        <li v-for="item in stores" :key="item.id">
                            <StoreIconConnect :item="item" />
                            <svg-icon name="user-store-setting"
                                      @click.native="$router.push('/settings/store?id=' + item.id)" />
                        </li>
                    </ul>
                </div>

            </div>


            <!-- 无交易记录 -->
            <template v-if="tableList.length == 0 && rechargeList.length == 0">
                <BillingWalletRecentIntro />
                <BillingWalletRecentVia :config="config" />
            </template>

            <!-- 有记录 -->
            <template v-else>
                <BillingWalletRechargeRecord :records="rechargeList" :page="rechargePage" :total="rechargeTotal"
                                             @reload="getRecharge($event)" v-if="rechargeList.length > 0" />
                <BillingWalletRecentRecord :records="tableList" v-if="tableList.length > 0" />
            </template>

            <BillingWalletQuestions />
            <UxLoading2 :loading="loading.balance || loading.table || loading.recharge || loading.store" />

        </template>

        <!-- 充值弹窗 -->
        <UxDialog class="wallet-recharge-dialog" :title="recharge == 'input' ? 'Wallet top-up' : ''"
                  :visible="!!recharge" :status="recharge" @close="close()">

            <OrderPaymentWalletBank :bank="bank || {}" v-show="recharge == 'bank'" />


            <div class="wallet-recharge" v-if="recharge == 'input'">
                <!-- <div class="recharge-balance">
                    <span>Amount</span>
                    <label class="recharge-balance-input"><input type="text" v-model.number="amount"
                            oninput='value=value.replace(/[^0-9.]/g,"").replace(/\.{2,}/g,".").replace(".","$#$").replace(/\./g,"").replace("$#$",".").replace(/^(\-)*(\d+)\.(\d\d).*$/,"$1$2.$3")'
                            placeholder="Recharge amount" />
                    </label>
                </div> -->


                <div class="contact-button">
                    <div class="top-btn" @click="openWindow('https://m.me/PodPartnerCo')">
                        <img src="https://img.podpartner.com/static/images-20231130/messenger.png"
                             style="width: 18px; height: 18px" alt="" />
                        <a @click.prevent href="https://m.me/PodPartnerCo">Messenger</a>
                    </div>
                    <div class="top-btn" @click="gotoWhatsapp()">
                        <img src="https://img.podpartner.com/static/images-20231130/whatsapp-active.png"
                             style="width: 18px; height: 18px;" alt="" />
                        <a>Whatsapp</a>
                    </div>
                </div>

                <!-- <div class="recharge-notify">
                    <p v-if="rechargeForbid" v-text="rechargeForbid"></p>
                    <strong v-if="level >= 5 && !recharge_notify_ignore">
                        <span>Your POD Wallet's top-up limit has increased to USD 3,000 as your POD points reached
                            25,000.</span>
                        <a @click="setNotify()"><svg-icon name="small-close"></svg-icon></a>
                    </strong>
                </div> -->

                <div class="recharge-payment">
                    <!-- <h3 v-if="level >= 2">Select Payment Method</h3> -->
                    <!-- <OrderPaymentPaypal :disabled="!!rechargeForbid" :option="rechargeOption"
                        @statusChange="rechargeStatusChange($event)" /> -->
                    <!-- <OrderPaymentCard v-if="level >= 2" :disabled="!!rechargeForbid" :option="rechargeOption" @statusChange="rechargeStatusChange($event)" /> -->
                    <!-- <OrderPaymentPayoneer v-if="level >= 2" :disabled="!!rechargeForbid" :option="rechargeOption" @statusChange="rechargeStatusChange($event)" /> -->
                    <!-- <p>Your data is safe - we don't store <br> your card or billing method details.</p> -->
                </div>

            </div>
        </UxDialog>

        <!-- 自动支付提示弹窗 -->
        <UxDialog title="" :visible="insufficient" @close="insufficient = false">
            <div class="insufficient-dialog">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/pay-insufficient.png" alt="" />
                </figure>
                <p>Please add funds before you tum on automatic payments.</p>
                <button type="primary" @click="insufficient = false">OK</button>
            </div>
        </UxDialog>

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "UserBillingwallet",
    layout: "layout-user",
    data () {
        return {
            recharge_notify_ignore: false,
            loading: {
                balance: true,
                table: true,
                store: true,
                config: true,
                recharge: false,
            },
            inited: false,
            stores: [],
            tableList: [],
            rechargeList: [],
            rechargeTotal: 0,
            rechargePage: 1,
            balance: 0,
            amount: 1000,
            recharge: false,
            rechargeState: false,
            insufficient: false,
            polling: null,
            recharge_history: [],
            bank: null,
            config: null,
        };
    },
    watch: {
    },
    computed: {
        ...mapState('user', {
            level: "level",
        }),
        ...mapState('user', {
            is_wallet: 'is_wallet',
            show_wallet: 'show_wallet',
        }),
        limit () {
            if (this.level >= 5) {
                return 3000;
            } else {
                return 1000;
            }
        },
        rechargeForbid () {
            let result, val = this.amount;
            if (val > this.limit) {
                return 'The maximum top-up amount is USD ' + this.limit.toLocaleString()
            } else if (val < 1) {
                return 'The minimum top-up amount is USD 1'
            } else if (this.recharge_history.includes(val * 100)) {
                return 'To avoid any potential bank risk control issues, You cannot top up the same amount as what you added in the past 48 hours.'
            } else {
                return null
            }
        },
        rechargeOption () {
            return {
                payment: "wallet",
                amount: Math.round(100 * this.amount),
                action: 'recharge',
            }
        }
    },
    methods: {
        openAutoPay () {
            if (this.balance > 0) {
                this.$router.push("/settings/store?action=autopay");
            } else {
                this.insufficient = true;
            }
        },
        openRechargeDialog () {

            this.loading.balance = true;
            this.$http("Wallet.getRechargeNotify", {}).then(res => {
                if (res.code === 0) {
                    // 有银行卡
                    // 显示银行卡信息
                    this.recharge = 'bank';
                    this.bank = res.data;
                    this.loading.balance = false;
                } else {
                    this.recharge = 'input';
                    this.bank = null;
                    this.loading.balance = false;
                }
            })

        },
        //获取总金额
        async getBalance () {
            this.loading.balance = true;
            let res = await this.$http("Wallet.getBalance");
            if (res.code == 0) {
                this.balance = res.data.balance;
                this.recharge_history = res.data.recharge_list;
            } else {
                this.$uxMessage.warning(res.msg);
            }
            this.loading.balance = false;

        },
        // 钱包配置
        async getConfig () {
            this.loading.config = true;
            let res = await this.$http("Wallet.getConfig");
            if (res.code == 0) {
                this.config = res.data || {}
                this.loading.config = false;
                // this.$debug(() => this.config.wallet_apply_state = 3)
            } else {
                this.$uxMessage.warning(res.msg);
            }
            this.loading.config = false;

        },

        //  请求数据
        async getData () {
            this.loading.table = true;
            let res = await this.$http("Wallet.getWalletLog", { page_size: 5 });
            if (res.code == 0) {
                this.tableList = res.data || [];
            } else {
                this.$uxMessage.warning(res.msg);
            }
            this.loading.table = false;
        },


        // 获取充值记录
        async getRecharge (page) {
            this.loading.recharge = true;
            let res = await this.$http("Wallet.getRechargeRecords", { page_size: 5, page_num: page || this.rechargePage });
            if (res.code == 0) {
                this.rechargeList = res.data || [];
                this.rechargeTotal = res.total || 0
                this.rechargePage = page || this.rechargePage
            } else {
                this.$uxMessage.warning(res.msg);
            }
            this.loading.recharge = false;
        },

        // 获取商店列表
        async getStore () {
            this.loading.store = true;
            let response = await this.$http("UserStore.getAllLinkStore");

            if (response.code == 0) {
                let list = response.data || [];
                this.stores = list.filter((item) => item.auto_pay);
                this.loading.store = false;

            } else {
                this.stores = [];
                this.loading.store = false;
            }
        },

        // 清空数据
        setRechargeUser (opt) {
            const option = Object.assign({}, opt)
            const request = option.cardholder && option.phone ? option : { cardholder: '', phone: '' }
            Object.keys(request).map(key => this.config[key] = request[key])
            this.$http("Wallet.setRechargeUser", request);
        },

        // 充值完成
        rechargeStatusChange (info = {}) {

            if (!this.recharge) {
                // 没有打开，不管了

            } else if (info.action == 'before') {
                // 支付前
                // 是否禁止充值
                this.recharge = 'paying'
                info.callback && info.callback(true)

            } else if (info.action == 'success') {
                // 支付成功
                // 充值成功
                // 先loading
                this.$uxMessage.success("Top-up successful");
                this.getData();
                this.getBalance();
                this.recharge = '';
                this.amount = this.limit;

            } else if (info.action == 'cancel') {
                // 支付失败
                this.recharge = 'input'

            } else {
                // 其他情况不管
            }
        },


        formatPrice (price) {
            return (price / 100).toFixed(2);
        },



        close () {
            // if (this.rechargeState) {
            //     this.getData();
            //     this.getBalance();
            // }
            // this.polling && clearTimeout(this.polling);
            // this.rechargeState = false;
            this.recharge = false;
            this.amount = this.limit;
        },
        setNotify () {
            this.recharge_notify_ignore = true;
            this.$localstoreConfig('recharge_notify_ignore', this.recharge_notify_ignore)
        },

        openWindow (url) {
            window.open(url, "_blank");
        },
        gotoWhatsapp () {
            this.$gmeRepore('whatsapp').then(e => {
                let path = "http://wa.me/message/4V7UTTIJDLJFD1"
                window.open(path, "_blank");
            })
        }
    },
    created () {
        if (process.client) {

            if (this.show_wallet != 2) {
                // 不显示钱包
                this.$router.replace('/user')
            } else if (this.is_wallet == 2) {
                // 已开通
                Promise.all([this.getBalance(), this.getConfig(), this.getData(), this.getRecharge(), this.getStore()]).then(() => this.inited = true)
            } else {
                // 未开通
                Promise.all([this.getConfig()]).then(() => this.inited = true)
            }

            this.recharge_notify_ignore = this.$localstoreConfig('recharge_notify_ignore')
            this.amount = this.limit
        }
    },
    beforeDestroy () {
        this.polling && clearTimeout(this.polling);
    }
};
</script>
<style lang="scss" scoped>
.wallet {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    &>h2 {
        display: flex;
        align-items: center;
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 40px;
    }

    &>h3 {
        margin-top: 40px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 18px;
        ;
    }

    &>.initing {
        flex: 1;
    }

    &>.loading {
        position: fixed;
        left: 228px;
        top: 0;
        bottom: 0;
        right: 0;
    }
}

.wallet-box {

    margin-top: 18px;
    position: relative;
    display: flex;

    .wallet-balance {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        height: 270px;
        width: 48%;

        img {
            margin-top: 60px;
            width: 200px;
            height: 26px;
            margin-left: 4px;
        }

        .wallet-balance-card {
            display: flex;
            align-items: center;
            height: 98px;
            padding: 0 18px;
            margin-top: 40px;
            background: #F8F8F8;
            border-radius: 8px;

            em {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 32px;
                color: #000000;
                line-height: 40px;
            }


            strong {
                flex: 1;
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 36px;
                color: #000000;
                line-height: 40px;
                margin-left: 10px;
            }

            .wallet-recharge {
                width: 108px;
                height: 36px;
            }

        }



    }

    .wallet-stores {

        display: flex;
        flex-direction: column;
        padding: 14px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        height: 270px;
        flex: 1;
        margin-left: 16px;
        overflow: auto;

        &>h3 {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 16px;
            color: #292929;
            line-height: 18px;
        }

        &>p {
            margin-top: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            font-size: 12px;
            color: #292929;
            line-height: 20px;
            margin-bottom: 11px;
        }

        ul {
            margin: 5px -5px 0;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            border-radius: 8px;
            border: 1px solid #ebebeb;
            padding: 12px;
            box-sizing: border-box;
            width: calc(50% - 10px);
            margin: 5px;
            position: relative;

            .store-icon-connect {
                flex-direction: column;
                align-items: self-start;
            }

            .svg-icon {
                position: absolute;
                right: 14px;
                top: 14px;
                width: 24px;
                height: 24px;
                box-sizing: border-box;
                padding: 4px;
                color: #000;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;

                &:hover {
                    background: rgba(0, 0, 0, 0.06);
                }
            }

            &::v-deep {
                strong {
                    margin-top: 10px;
                    display: block;
                    height: 18px;
                }

                span {
                    margin-top: 6px;
                    height: 16px;
                }
            }

            &[type='add'] {
                border: 1px dashed #b3b3b3;
                cursor: pointer;
                transition: all 0.2s;

                svg {
                    width: 32px;
                    height: 32px;
                    box-sizing: border-box;
                    padding: 9px;
                    background: #f0f0f0;
                    border-radius: 4px;
                    transition: color 0.2s;
                }

                strong {
                    margin-top: 0;
                    display: none;
                }

                span {
                    display: block;
                    margin-top: 24px;
                    height: 16px;
                    font-size: 14px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #555555;
                    line-height: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &:hover {
                    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
                    border: 1px solid #ebebeb;

                    svg {
                        fill: #ea4c89;
                    }
                }

                &:active {
                    svg {
                        color: #ea4c89;
                    }
                }
            }
        }
    }

    .wallet-stores-open {}
}





// .wallet-recent {
//     display: block;
//     position: relative;
//     box-sizing: border-box;
//     margin-top: 40px;

//     .wallet-recent-loading {
//         position: relative;
//         flex: 1;
//         p {
//             position: absolute;
//             left: 0;
//             top: 0;
//             width: 100%;
//             height: 100%;
//             position: relative;
//         }

//         &::v-deep .el-loading-mask {
//             background: none;
//         }
//     }
// }

// .wallet-balance {
//     display: flex;
//     flex-wrap: wrap;
//     padding: 56px 40px 26px;
//     border-radius: 8px;
//     background: #fff;
//     align-items: center;
//     overflow: hidden;
//     position: relative;

//     span {
//         position: absolute;
//         top: 18px;
//         left: 40px;

//         padding-bottom: 16px;

//         width: calc(100% - 80px);
//         font-size: 18px;

//         font-weight: 600;
//         color: #000000;
//         line-height: 21px;

//         border-bottom: 1px solid #dcdcdc;
//     }

//     > figure {
//         width: 160px;
//         height: 21px;
//         margin-right: 11px;
//         img {
//             width: 160px;
//             height: 21px;
//         }
//     }

//     cite {
//         margin: 48px 0;
//         display: flex;
//         height: 50px;
//         // border: 1px solid #c6c6c6;
//         box-sizing: border-box;
//         position: relative;
//         background: #fafafa;

//         strong {
//             border-radius: 8px 0 0 8px;
//             border: 1px solid #c6c6c6;
//             min-width: 150px;
//             text-align: center;

//             font-size: 24px;

//             font-weight: 600;
//             color: #000000;

//             line-height: 50px;
//             box-sizing: border-box;
//             white-space: nowrap;
//             text-align: center;

//             &:before {
//                 content: 'USD';
//                 font-size: 12px;

//                 color: #555;
//                 line-height: 14px;
//                 margin-right: 4px;
//                 vertical-align: baseline;
//                 transform: translateY(-1px);
//             }
//         }
//         button {
//             margin-left: -1px;
//             border-radius: 0 8px 8px 0;
//             border: 1px solid #c6c6c6;
//             padding: 0;
//             background: transparent;
//             width: 92px;
//             height: 100%;

//             font-size: 14px;

//             font-weight: 600;
//             color: #000000;
//             &:hover {
//                 border-color: #ea4c89;
//                 color: #ea4c89;
//             }
//         }
//     }
// }

// .user-common-table {
//     width: 100%;
//     border-collapse: collapse;

//     thead {
//         height: 36px;
//         line-height: 36px;
//         font-size: 14px;
//         font-weight: bold;
//         color: #000000;
//         white-space: nowrap;

//         th {
//             position: relative;
//             background: #f0f0f0;
//             text-align: center;
//             font-weight: normal;
//             padding: 0;
//             font-weight: bold;

//             &::before {
//                 content: '';
//                 display: block;
//                 position: absolute;
//                 width: 1px;
//                 height: 22px;
//                 background: #d8d8d8;
//                 right: 0;
//                 top: 50%;
//                 transform: translateY(-50%);
//             }

//             &:first-child {
//                 border-radius: 2px 0 0 2px;
//             }

//             &:last-child {
//                 border-radius: 0 2px 2px 0;

//                 &::before {
//                     display: none;
//                 }
//             }
//         }
//     }

//     tbody {
//         tr:nth-child(2n) {
//             td {
//                 background: #fafafa;
//             }
//         }

//         tr:hover {
//             td {
//                 background: #eeeeee;
//             }
//         }

//         td {
//             padding: 30px;
//             text-align: center;
//             // cursor: pointer;
//             transition: background 0.5s;

//             p {
//                 line-height: 20px;
//                 font-size: 14px;
//                 font-weight: bold;
//                 color: #000000;
//                 font-weight: normal;
//             }
//         }
//     }

//     tr:hover {
//         td {
//             background: transparent;
//         }
//     }
// }

// .wallet-stores {
//     border-top: 1px solid #dcdcdc;
//     width: 100%;
//     display: flex;
//     position: relative;
//     padding: 40px;
//     box-sizing: border-box;
//     padding: 32px 0px 0px;

//     .wallet-stores-nostore {
//         > a {
//             display: inline-block;
//             height: 32px;
//             line-height: 32px;
//             padding: 0px 12px;
//             background: #000000;
//             border-radius: 4px;
//             margin-bottom: 14px;

//             font-size: 14px;

//             font-weight: 600;
//             color: #f6f6f6;

//             &:hover {
//                 background: #2e2e2e;
//                 box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
//                 border-radius: 4px;
//             }
//         }
//         > h4 {
//             font-size: 14px;
//             font-weight: 600;
//             color: #000000;
//             line-height: 16px;
//             margin-bottom: 8px;
//         }
//         > p {
//             font-size: 14px;

//             color: #555555;
//             line-height: 24px;
//         }
//     }

//     .wallet-stores-list {
//         flex: 1;
//         display: flex;
//         flex-wrap: wrap;
//         position: relative;
//         background: #fff;
//         border-radius: 8px;

//         > h4 {
//             width: 100%;
//             font-size: 16px;

//             font-weight: 600;
//             color: #000000;
//             line-height: 18px;
//             margin-bottom: 22px;
//         }

//         a {
//             margin: 0 14px 14px 0;
//             display: flex;
//             flex-direction: column;
//             align-items: center;
//             justify-content: center;
//             position: relative;
//             width: 160px;
//             height: 78px;
//             cursor: pointer;
//             background-color: #fff;
//             border: 1px solid #e6e6e6;
//             border-radius: 8px;
//             &::v-deep .shop-name {
//                 justify-content: center;
//                 flex-direction: column;
//                 figure {
//                     width: 28px;
//                     height: 28px;
//                 }
//                 span {
//                     margin-top: 6px;
//                     width: 136px;
//                     height: 14px;
//                     font-size: 14px;
//                     line-height: 14px;

//                     font-weight: normal;
//                     color: #000000;
//                     text-align: center;
//                     text-overflow: ellipsis;
//                     overflow: hidden;
//                 }
//             }
//             strong {
//                 margin-top: 6px;
//                 width: 136px;
//                 height: 14px;
//                 font-size: 14px;
//                 line-height: 14px;

//                 font-weight: normal;
//                 color: #000000;
//                 text-align: center;
//                 text-overflow: ellipsis;
//                 overflow: hidden;
//             }
//             i {
//                 margin-left: 12px;
//                 width: 24px;
//                 height: 24px;
//                 line-height: 24px;
//                 font-size: 18px;
//                 &:hover {
//                     color: #ea4c89;
//                 }
//             }

//             // &:first-child {
//             //     border-top-left-radius: 8px;
//             //     border-bottom-left-radius: 8px;
//             // }
//             // &:last-child {
//             //     border-top-right-radius: 8px;
//             //     border-bottom-right-radius: 8px;
//             // }

//             &:hover {
//                 border-color: #ea4c89;
//                 strong {
//                     color: #ea4c89;
//                 }
//             }

//             &.active {
//                 background: #f6f6f6;
//                 i {
//                     display: block;
//                 }
//             }
//         }
//     }
// }

.insufficient-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 72px 14px 14px;
    width: 320px;
    height: 414px;

    figure {
        text-align: center;

        img {
            width: 80px;
            height: 80px;
        }
    }

    p {
        flex: 1;
        font-size: 16px;
        color: #000000;
        line-height: 24px;
        margin: 48px 0 0;
        text-align: center;
    }

    button {
        width: 100%;
        height: 38px;
        border-radius: 6px;
        margin: 0 auto;
    }
}

.wallet-recharge-dialog[status='paying'] {
    display: none !important;
    pointer-events: none;
}

// .wallet-recharge {
//     width: 348px;
//     box-sizing: border-box;
//     display: flex;
//     flex-direction: column;
//     padding: 42px 18px 18px;

//     .recharge-balance {
//         display: flex;
//         flex-direction: column;
//         flex: 1;
//         position: relative;

//         &>span {
//             height: 18px;
//             font-size: 14px;
//             font-family: Roboto-Medium, Roboto;
//             font-weight: 500;
//             color: #000000;
//             line-height: 16px;
//         }

//         label {
//             margin-top: 10px;
//             height: 44px;
//             background: #ffffff;
//             border-radius: 6px;
//             border: 1px solid #c6c6c6;
//             box-sizing: border-box;
//             position: relative;

//             &:hover,
//             &:focus-within {
//                 outline: 1px solid #ea4c89;
//                 border-color: #ea4c89;
//             }

//             &:before {
//                 content: 'USD';
//                 position: absolute;
//                 left: 0;
//                 top: 0;
//                 height: 100%;
//                 width: 56px;
//                 text-align: center;
//                 line-height: 44px;
//                 font-weight: bold;
//                 background: #fafafa;
//                 border-radius: 6px 0 0 6px;
//                 border-right: 1px solid #c6c6c6;
//             }

//             input {
//                 width: 100%;
//                 height: 100%;
//                 box-sizing: border-box;
//                 background: #ffffff;
//                 border-radius: 6px;
//                 border: none;
//                 line-height: 18px;
//                 padding: 12px 12px 12px 68px;
//                 font-size: 14px;
//                 font-family: Roboto-Regular, Roboto;
//                 font-weight: 400;
//                 color: #000000;
//                 text-align: left;

//                 &::placeholder {
//                     font-size: 14px;
//                     color: #919191;
//                 }
//             }
//         }
//     }

//     .recharge-notify {
//         position: relative;
//         height: 104px;
//         display: flex;
//         flex-direction: column;

//         p {
//             margin-top: 8px;
//             font-size: 12px;
//             color: #f44336;
//             line-height: 16px;
//             font-family: Roboto-Regular, Roboto;
//         }

//         strong {
//             position: relative;
//             margin-top: 8px;
//             box-sizing: border-box;
//             background: rgba(49, 153, 189, 0.08);
//             border-radius: 6px;
//             display: flex;
//             padding: 8px 20px 8px 12px;
//             margin-top: 10px;
//             font-weight: normal;
//             font-family: Roboto-Regular, Roboto;

//             &>span {
//                 font-size: 12px;
//                 color: #3199bd;
//                 line-height: 16px;
//             }

//             svg {
//                 position: absolute;
//                 width: 16px;
//                 height: 16px;
//                 right: 1px;
//                 top: 0;
//                 box-sizing: border-box;
//                 padding: 1px;
//                 color: #3199bd;
//                 cursor: pointer;

//                 &:hover {
//                     color: #37647b;
//                 }
//             }
//         }
//     }

//     .recharge-payment {
//         display: flex;
//         flex-direction: column;
//         box-sizing: border-box;

//         &>h3 {
//             font-size: 14px;
//             font-family: Roboto-Medium, Roboto;
//             font-weight: 500;
//             color: #000000;
//             line-height: 16px;
//             text-align: center;
//         }

//         &>p {
//             margin-top: 12px;
//             user-select: none;
//             box-sizing: border-box;
//             background: #f3f9f3;
//             border-radius: 8px;
//             padding: 14px 14px 14px 58px;
//             font-size: 14px;
//             font-family: Roboto-Regular, Roboto;
//             font-weight: 400;
//             color: #69a274;
//             line-height: 18px;
//             position: relative;
//             white-space: nowrap;

//             &::before {
//                 content: '';
//                 display: block;
//                 position: absolute;
//                 top: 50%;
//                 left: 12px;
//                 transform: translateY(-50%);
//                 width: 36px;
//                 height: 36px;
//                 background-image: url('https://img.podpartner.com/static/images-20230202/payment-safe.png');
//                 background-size: 36px 36px;
//             }
//         }

//         .payment-paypal,
//         .payment-payoneer,
//         .payment-card {
//             margin-top: 12px;
//         }
//     }

//     .contact-button {
//         display: flex;
//         justify-content: center;
//         padding-top: 60px;
//         position: relative;

//         &::before {
//             content: 'Please contact customer service to enable this feature to complete the top-up.';
//             position: absolute;
//             left: 50%;
//             top: 0;
//             transform: translateX(-50%);
//             width: 100%;
//             text-align: center;
//             font-size: 14px;
//         }

//         .top-btn {
//             &:hover {
//                 cursor: pointer;
//                 // border-color: #ea4c89;
//                 background: #f6f6f6;
//             }

//             >a {
//                 &:hover {
//                     color: #000000 !important;
//                     text-decoration: none;
//                 }

//                 color: #000000;
//                 margin: 0 0 0 4px;
//             }

//             font-size: 14px;
//             color: #000000;
//             box-sizing: border-box;
//             height: 34px;
//             background: #ffffff;
//             width: 120px;
//             border-radius: 8px;
//             border: 1px solid #e6e6e6;
//             display: flex;
//             align-items: center;
//             justify-content: center;
//             margin: 0 0 12px 0;

//             i {
//                 &:nth-child(2) {
//                     color: #fbbc06;
//                 }

//                 font-size: 24px;

//                 &.icon-zhandianditu-kaishiliaotian {
//                     color: #48c4ef;
//                 }

//                 &.icon-zhandianditu-youjian {
//                     color: #f8cf1e;
//                 }
//             }
//         }

//         .top-btn+.top-btn {
//             margin-left: 6px;
//         }
//     }


//     // .recharge-payment {
//     //     margin-top: 46px;
//     //     display: flex;
//     //     flex-direction: column;
//     //     box-sizing: border-box;

//     //     a {
//     //         height: 48px;
//     //         border-radius: 8px;
//     //         display: flex;
//     //         justify-content: center;
//     //         align-items: center;
//     //         cursor: pointer;

//     //         &:nth-child(1) {
//     //             background-color: #ffc439;
//     //             img {
//     //                 width: 98px;
//     //                 height: 31px;
//     //                 display: block;
//     //                 &:nth-child(2) {
//     //                     display: none;
//     //                 }
//     //             }
//     //         }

//     //         & + a {
//     //             margin-top: 22px;
//     //         }

//     //         &:hover {
//     //             opacity: 0.8;
//     //         }
//     //         &[disable] {
//     //             &:nth-child(1) {
//     //                 background-color: #d8d8d8;
//     //                 img {
//     //                     display: block;
//     //                     &:nth-child(1) {
//     //                         display: none;
//     //                     }
//     //                 }
//     //             }
//     //         }
//     //     }
//     // }
// }

.wallet-paying {
    width: 320px;
    height: 374px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &>figure {
        width: 66px;
        height: 66px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    &>h4 {
        height: 8px;
        margin-top: 16px;

        img {
            width: 40px;
            height: 8px;
        }
    }

    &>p {
        margin: 26px 20px 0;
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }
}

.recharge-balance-input input:focus {
    color: red;
}

// &:focus {
//   .recharge-balance-input {
//     border-color: #ea4c89 !important;
//   }
// }</style>
